<template>
  <div class="show-main">
    <el-scrollbar style="height:100%">
      <el-form :inline="true" :model="searchForm" class="demo-form-inline" size="small">
        <el-form-item label="">
          <el-input v-model="searchForm.shop_name" placeholder="请输入商户店铺名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input v-model="searchForm.name" placeholder="请输入商品名称" clearable></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-select v-model="searchForm.type" placeholder="请选择类型" clearable>
            <el-option label="普通类型" :value="1"></el-option>
            <el-option label="套餐类型" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.stop="search(true)">搜索</el-button>
          <el-button type="success" @click.stop="search">刷新</el-button>
        </el-form-item>
      </el-form>
      <el-table :data="table" border size="small">
        <el-table-column prop="id" label="ID"></el-table-column>
        <el-table-column prop="shop_name" label="商铺名称"></el-table-column>
        <el-table-column prop="name" label="商品名称"></el-table-column>
        <el-table-column prop="type" label="商品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.type === 1" style="color:#409EFF">普通类型</span>
            <span v-else-if="scope.row.type === 2" style="color:#E6A23C">套餐类型</span>
            <span v-else style="color:#F56C6C">---</span>
          </template>
        </el-table-column>
        <el-table-column prop="lunchbox_fee" label="餐盒费(元)"></el-table-column>
        <el-table-column prop="lunchbox_type" label="餐盒费收取方">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.lunchbox_type == 1 ? '运营商' : '商家'" placement="top" :enterable="false">
              <el-switch
                v-model="scope.row.lunchbox_type"
                :active-value="1"
                :inactive-value="2"
                active-color="#409EFF"
                inactive-color="#E6A23C"
                @change="typeChange(scope.row)"
              >
              </el-switch>
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="创建时间"></el-table-column>
        <el-table-column label="操作" width="150">
          <template slot-scope="scope">
            <el-dropdown trigger="click" @command="handleCommand">
              <el-button type="primary"> 操作菜单<i class="el-icon-arrow-down el-icon--right"></i> </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item :command="{ cmd: 'setFee', id: scope.row.id, fee: scope.row.lunchbox_fee }">餐盒费设置</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table>
      <div class="page">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="searchForm.page"
          :page-sizes="[10, 20, 30, 40]"
          :page-size="searchForm.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="count"
        >
        </el-pagination>
      </div>
    </el-scrollbar>
  </div>
</template>
<script>
import { getGoodsList, setFee, typeChange } from '@/network/api.js'

export default {
  name: 'lunchboxfee',
  data() {
    return {
      searchForm: {
        page: 1,
        limit: 10,
        name: '',
        shop_name: '',
        type: ''
      },
      count: 0, // 总记录数
      table: [],

      rules: {}
    }
  },
  created() {
    this.search()
  },
  computed: {},
  methods: {
    async search(pageInit = false) {
      try {
        if (pageInit === true) {
          this.searchForm.page = 1
        }
        const rtn = await getGoodsList(this.searchForm)
        this.table = rtn.data.data
        this.count = rtn.data.count
      } catch (e) {
        this.$message.error(e.message)
      }
    },
    // 每页条数变化
    handleSizeChange(val) {
      this.searchForm.limit = val
      this.search()
    },
    // 当前页变化
    handleCurrentChange(val) {
      this.searchForm.page = val
      this.search()
    },
    setFee(id, fee) {
      this.$prompt('请输入餐盒费', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /^(([0-9]\d?)|(\d\.\d{1,2})|([1-9]\d\.\d{1,2}))$/,
        inputPlaceholder: fee,
        inputErrorMessage: '餐盒费不正确'
      })
        .then(async ({ value }) => {
          try {
            await setFee({ id, lunchbox_fee: value })
            this.search()
          } catch (e) {
            this.$message.error(e.message)
          }
        })
        .catch(() => {
          this.$message.warning('您取消了当前操作')
        })
    },
    async typeChange(row) {
      try {
        await typeChange({ id: row.id, lunchbox_type: row.lunchbox_type })
      } catch (e) {
        row.lunchbox_type = row.lunchbox_type === 1 ? 2 : 1
        this.$message.error(e.message)
      }
    },
    handleCommand(command) {
      switch (command.cmd) {
        case 'setFee':
          this.setFee(command.id, command.fee)
          break
      }
    },
    // 关闭弹出前操作(不包括取消按钮)
    handleClose(formName) {
      return done => {
        this.$refs[formName].resetFields()
        done()
      }
    },
    // 取消按钮
    close(visibleName, formName) {
      this.$refs[formName].resetFields()
      this[visibleName] = false
    },
    send(visibleName, formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          switch (formName) {
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="less" scoped>
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 50%;
}
</style>
